<template>
  <div class="page-box">
    <div class="page-search">
      <div>
        <label>盘号名称</label>
        <el-input v-model="searchForm.Number" style="width:160px;" placeholder="请输入盘号名称"></el-input>
      </div>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>

    <div class="page-section">
            <div class="page-tool">
                <el-button type="primary"  plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger"  plain icon="el-icon-delete" @click="dels" size="small">批量删除</el-button>
                <el-dropdown class="mg-l">
                            <el-button size="small" type="primary" plain>
                                <i class="el-icon-s-grid"></i> 
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
            </div>

            <!--表单-->
            <el-table :data="tableData"  ref="dataForm"   v-loading="isLoading"  height="calc(100vh - 350px)">
                <el-table-column  type="selection" width="55"></el-table-column>
                <el-table-column  fixed prop="Number" label="盘号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column   label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)">编辑</el-button>
                        <el-button type="text" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
    

            <Pagination @handleSizeChange="handleSizeChange"  @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount"/>
        </div>
 
            <!--弹窗-->
             <el-dialog  :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="20%" @close="closeDialog">
           <PanHaoInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible"/>
        </el-dialog>
  </div>
</template>

<script>
import PanHaoInput from "./components/PanHaoInput.vue";
import Pagination from "@/components/Pagination.vue";


  export default{
  components: {
    PanHaoInput,
    Pagination 
  },
  mounted(){
    this.dataBind();
  },
  data(){
    return{
      searchForm:{
        Number:'',
      },
      dialogDomain:{
        title:'新增盘号',
        dialogVisible:false
      },

      isUpdate:false,
      model:{
        Number:''
      },
      pageDomain:{
        PageIndex:1,
        PageSize:10,
        TotalCount:0
      },
        tableData:[],
        isLoading:false
    }
  },
  methods:{
    add(){
      this.dialogDomain.title="新增盘号";
      this.dialogDomain.dialogVisible=true;
      this.isUpdate=false;
    },
    update(model){
      this.dialogDomain.title="编辑盘号";
      this.dialogDomain.dialogVisible=true;
      this.isUpdate=true;

      console.log(model);
      this.model=model;
    },
    handleSizeChange(val){
      this.pageDomain.PageIndex = 1;
      this.pageDomain.PageSize = val;
      this.dataBind();
    },
    handleCurrentChange(val){
      this.pageDomain.PageIndex = val;
      this.dataBind();
    },

    //批量删除
    dels(){
      if(this.$refs.dataForm.selection.length<=0)
      {
        this.showNotify('请先选择一项')
        return;
      }
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
     })
     .then(() => {
                
                //获取选中的表格数据 并筛选id
                var ids =this.$refs.dataForm.selection.map(x=>x.Id)

                //拼接参数
                let params =  new URLSearchParams();
                params.append('ids',ids.join(','))

                this.$http.delete('/api/PanHao/DelAll',{
                    data:params,
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    },
                    loading:this.$loading()
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});     
    },

    //单条删除
    del(model){
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$http.delete('/api/PanHao',{
                    data:{
                        id:model.Id
                    },
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});  
    },

    //导出
    exports(){
      this.$confirm('即将导出报表，是否继续？', '系统提示', {
                confirmButtonText: '导出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.request({
                    method: "GET",
                    loading:this.$loading(),
                    url: "/api/PanHao/Export",
                    responseType: 'blob'
                }).then((res)=>{
                    const blob = new Blob([res])
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '盘号信息.xls'; //下载后文件名
                    downloadElement.click(); //点击下载
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
                

            }).catch((err)=>{
                console.log(err);
            })
    },

    closeDialog(){
      this.model={
        Number:''
      }
    },

    search(){
      this.pageDomain.PageIndex=1;
      this.dataBind();
    },
    reset(){
      this.searchForm.Number='';
    },
    //新增或编辑
    callback(){
      let actionName = this.isUpdate?'编辑':'新增';
      this.showNotify(actionName+'盘号成功','success');
      this.dialogDomain.dialogVisible=false;
      this.dataBind();
    },
    dataBind(){
      this.isLoading=true;
      this.$http.get('/api/PanHao',
      {
        params:{
          PageIndex:this.pageDomain.PageIndex,
          PageSize:this.pageDomain.PageSize,
          Number:this.searchForm.Number,
        }
      })
      .then(res=>{
        this.tableData=res.Data;
        this.pageDomain.TotalCount = res.Count;
        this.isLoading=false;
      })
    }
  }
}
</script>

<style scoped>

</style>